<template>
  <el-table :data="data" border stripe>
    <el-table-column prop="btName" label="塔号" align="center" width="130" />
    <el-table-column label="水平张力HI(走板到达塔位时各塔位的水平张力)" align="center">
      <el-table-column v-for="col in columns" :prop="col.prop" :key="col.label" :label="col.label" align="center" />
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import useBet from '@/composables/useBet'
import useCalculatePower from '@/composables/useCalculatePower'
import useTower from '@/composables/useTower'
import { ref } from 'vue'

type columnType = {
  label: string
  prop: string
}
const { all: findAllBet, bets } = useBet()
const { all: findAllTower, towers } = useTower()
const { power } = useCalculatePower()
const data = ref<any>([])

const columns = ref<columnType[]>([])

async function init() {
  // await findPower(configId)
  const { config } = power.value!
  const zoneId = config.zoneId

  await findAllBet({ zoneId })
  await findAllTower({ zoneId })

  // 定义column名称
  columns.value = towers.value!.map((v) => ({
    label: v.tName,
    prop: v.tName,
  }))

  for (let x = 0; x < bets.value!.length; x++) {
    const model = {
      btName: bets.value![x].btName,
    }
    for (let y = 0; y < power.value!.powerTowers.length; y++) {
      const tName = power.value!.powerTowers[y].tower.tName
      const lst_Hi = JSON.parse(power.value!.powerTowers[y].Hi)
      Reflect.set(model, tName, lst_Hi[x].toFixed(2))
    }
    data.value.push(model)
  }
}

init()
</script>

<style></style>
